<template>
	<view>
		<view class="mar-15 tform">
			<view class="between center tform-item">
				<view class="value flex">功能名称</view>
				<view>
					<u-input v-model="form.name" input-align="right" placeholder="请输入功能名称" />
				</view>
			</view>
			<view class="between center tform-item">
				<view class="value flex">排序编号</view>
				<view>
					<u-input v-model="form.sort" input-align="right" placeholder="请输入排序编号" />
				</view>
			</view>
			<view class="between center tform-item">
				<view class="value flex">选择父类</view>
				<view>
					<u-input v-model="form.parentName" placeholder="不填写为则为父类" :type="type" @click="showSelect = true" />
					<u-select v-model="showSelect" :list="listParent" @confirm="actionSheetCallback"></u-select>
				</view>
			</view>
			<view class="between center tform-item">
				<view class="value flex">功能路径</view>
				<view>
					<u-input v-model="form.path" input-align="right" placeholder="请输入功能路径" />
				</view>
			</view>
			<view class="between center tform-item">
				<view class="value flex">功能图标</view>
				<view>

					<u-upload append-to-body :action="action" :preview-image="false" :show-progress="showpProgress"
						max-count="1" :before-upload="beforeUpload" @on-success="onSuccess"
						@on-remove="onRemove"></u-upload>
				</view>
			</view>
			<view class="between center tform-item">
				<view class="value flex">功能描述</view>
				<view>
					<u-input v-model="form.describe" input-align="right" placeholder="请输入功能描述" />
				</view>
			</view>
		</view>
		<view class="center">
			<u-button class="btn" type="primary" @click="confirm">提交</u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		upload
	} from '../../api/upload'
	import {
		menuSelect,
		menuAdd
	} from '../../api/menu'
	export default {
		data() {
			return {
				value: '',
				type: 'select',
				form: {
					parentId: 0,
					status: 1,
					parentId: 0,
				},
				action: 'hostApi',
				showSelect: false,
				listParent: [],
				showpProgress: false,
			}
		},
		computed: {
			...mapGetters(['hostApi']),
		},
		mounted() {
			this.action = this.hostApi + "/upload/menu"
			console.log(this.action)
			this.init();
		},
		methods: {
			init() {
				menuSelect({
					parentId: 0
				}).then(res => {
					if (res) {
						let map = new Map();
						res.forEach(item => {
							map.set(item.id, item);

						})
						map.forEach((v, k) => {
							this.listParent.push({
								value: k,
								label: v.name
							})
						})
					}
				})
			},
			actionSheetCallback(index) {
				this.form.parentName = index[0].label;
				this.form.parentId = index[0].value;
			},
			beforeUpload(index, list) {},
			onSuccess(data) {
				this.form.pathImg = data.result
				this.showpProgress = true;
			},
			onRemove() {
				this.form.pathImg = ''
			},
			confirm() {
				// if (!this.form.name) {
				// 	this.$u.toast('请填写功能名称')
				// 	return;
				// }
				// if (!this.form.code) {
				// 	this.$u.toast('请填写功能编码')
				// 	return;
				// }
				// if (!this.form.path) {
				// 	this.$u.toast('请填写功能路径')
				// 	return;
				// }
				if (!this.form.pathImg) {
					if (!this.showpProgress) {
						this.$u.toast('等待上传')
						return;
					} else {
						this.$u.toast('请上传功能图片')
						return;
					}
				}
				// 先查询当前编码是否已经存在，如果有，则提示不能修改
				// menuSelect({
				// 	code: this.form.code
				// }).then(res => {
				// 	console.log(res)
				// 	if (res.length > 0) {
				// 		this.$u.toast('当前编码已经存在，请重新填写')
				// 	} else {
				menuAdd(this.form).then(res => {
					if (res == 1) {
						this.$emit('close')
					}
				})
				// 	}
				// })

			}
		}
	}
</script>

<style scoped>
	uni-input {
		text-align: right;
	}

	.u_drawer {
		z-index: 777 !important;
	}
</style>